<template>
    <div class="contactGroupLineItem" @click="toggleExpand">
        <svg-icon :icon-class="iconClass"/>
        <div class="contactGroupLineTitle">
            <div>{{ groupName }}</div>
            <div class="contactGroupLineCount">{{ count }}</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ContactGroupLine',
    props: {
        // 分组名称
        groupName: {
            type: String,
            default: ''
        },
        // 人数
        count: {
            type: Number,
            default: 0
        },
        expandState: {
            type: Boolean,
            default: false
        },
    },
    created(){
        this.expanded = this.expandState;
        this.iconClass = this.expanded ? 'arrow-down-s-line' : 'arrow-right-s-line';
    },
    data() {
        return {
            iconClass: '', // arrow-right-s-line arrow-down-s-line
            expanded: false, // 是否展开
        }
    },
    methods: {
        toggleExpand() {
            this.expanded = !this.expanded;
            this.iconClass = this.expanded ? 'arrow-down-s-line' : 'arrow-right-s-line';
            this.$emit('expandedEmit', this.expanded);
        }
    }
}
</script>
<style scoped>
.contactGroupLineItem{
    display: flex;
    align-items: center;
}
.contactGroupLineCount{
    margin-right: 10px;
    color: var(--contactGroupLineCountColor);
}
.contactGroupLineTitle{
    display: flex;
    flex: 1;
    justify-content: space-between;
}
</style>
